<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/base.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/font/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/engineer-list.css" />
    <script src="/public/static/wx/js/flex.js" type="text/javascript" charset="utf-8"></script>
    <title>团队列表</title>
    <style type="text/css">


        ul {
            width: 94%;
            margin: 0 3%;
            overflow: hidden;
        }

        .list-item {
            position: relative;
            height: 2.666666rem;
            margin: 0.1rem auto;
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }

        .list-item[data-type="0"] {
            transform: translate3d(0, 0, 0);
        }

        .list-item[data-type="1"] {
            transform: translate3d(-2.1rem, 0, 0);
        }

        .list-item:after {
            content: " ";
            position: absolute;
            left: 0.2rem;
            bottom: 0;
            right: 0;
            height: 1px;
            color: #ccc;
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            z-index: 2;
        }

        .list-box {
            padding: 0.2rem;
            background: #fff;
            display: flex;
            align-items: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            justify-content: flex-end;
            border-radius: 5px;
            box-shadow: 0px 0px 3px 3px #ccc;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            font-size: 0;
        }

        .list-item .list-img {
            display: block;
            width: 1.5rem;
            height: 1.5rem;
        }

        .list-item .list-content {
            padding: 0.1rem 0 0.1rem 0.2rem;
            position: relative;
            flex: 1;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            overflow: hidden;
        }

        .list-item .title {
            display: inline-block;
            color: #333;
            overflow: hidden;
            font-size: 15px;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list-item span {
            display: inline-block;
            font-size: 10px;
            border: 1px solid #009688;
            border-radius: 3px;
            padding: 0 0.1rem;
            color: #009688;
            vertical-align: text-bottom;
            margin-left: 0.2rem;
        }

        .list-item .tips {
            display: block;
            overflow: hidden;
            font-size: 12px;
            color: #616161;
            margin-top: 0.1rem;
            line-height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list-item .good {
            display: block;
            overflow: hidden;
            font-size: 12px;
            color: #616161;
            margin-top: 0.1rem;
            line-height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list-item .time {
            display: block;
            background-color: #ffa800;
            border-radius: 3px;
            padding: 0.1rem;
            font-size: 10px;
            position: absolute;
            right: 0;
            top: 0.1rem;
            color: #fff;
        }

        .list-item .free {
            background-color: #00baff;
        }

        .list-item .delete {
            width: 2rem;
            height: 2.666666rem;
            background: #ff4949;
            font-size: 17px;
            color: #fff;
            text-align: center;
            line-height: 2.666666rem;
            position: absolute;
            top: 0;
            right: -2rem;
            border-radius: 5px;
        }

        .list-item .edit {
            width: 2rem;
            height: 2.666666rem;
            background: #00baff;
            font-size: 17px;
            color: #fff;
            text-align: center;
            line-height: 2.666666rem;
            position: absolute;
            top: 0;
            right: -2.1rem;
            border-radius: 5px;
        }
        .layui-layer-btn a{
            font-size: 18px;
        }
    </style>
</head>

<body>
<div class="index">
    <div class="btn" onclick="add()"><i class="fa fa-plus-circle" style="margin-right: 0.1rem;"></i>添加人员</div>
    <ul id="dataList" style="display: none">
        <li class="list-item " v-for="(item,index) in list " data-type="0" :pid = 'item.pid'>
            <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip">
                <img class="list-img" :src="item.imgUrl" alt="">
                <div class="list-content">
                    <p class="title">{{item.title}}</p><span>{{item.lead}}</span><span>{{item.tag}}</span>
                    <p class="tips">{{item.tips}}</p>
                    <p class="good" :style="{display:item.ca}">拒单原因：{{item.cause}}</p>
                </div>
            </div>
            <div class="delete" @click="deleteItem" :data-index="index" :style="{display: item.bl}">移除</div>
        </li>
    </ul>
</div>

<script src="/public/static/wx/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/wx/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/wx/plug-in/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script>
    var layer = layui.layer;
    var did = '{:input("id")}';
    var aid = '{:session("muid")}';
    var list = [];
    var index_load = layer.load(0, {shade: 0.2,offset:['45%','45%']});
    $.post('{:url("teamList")}',{dis_id:'{:input("id")}'},function (data) {
        layer.close(index_load);
        $('#dataList').show();
        $.each(data.data,function (k,v) {
            list.push({
                title:v.name+'('+v.username+')',
                imgUrl:(v.avatar&&v.avatar.length>0?v.avatar:'/public/static/wx/img/work-order-list/header.png'),
                is_conf:v.is_conf,
                ca:(v.is_conf==2?'block':'none'),
                cause:v.cause,
                tips:v.jobs_title,
                tag: '工程师',
                pid:v.admin_id,
                lead:'组长',
                bl:(v.is_lead!=1?'none':'inline-block')
            });
            if(v.children.length>0){
                $.each(v.children,function (kl,vl) {
                    list.push({
                        title:vl.name+'('+vl.username+')',
                        imgUrl:(v.avatar&&v.avatar.length>0?v.avatar:'/public/static/wx/img/work-order-list/header.png'),
                        is_conf:vl.is_conf,
                        ca:(vl.is_conf==2?'block':'none'),
                        cause:vl.cause,
                        tips:vl.jobs_title,
                        tag: '工程师',
                        pid:vl.admin_id,
                        lead:'组员',
                        bl:(vl.is_lead!=1?'none':'inline-block')
                    });
                });
            }
        });



        new Vue({
            el: '.index',
            data: {
                list: list,
                startX: 0,
                endX: 0,
            },
            methods: {
                //跳转
                skip() {
                    if(this.checkSlide()) {
                        this.restSlide();
                    } else {

                    }
                },
                //滑动开始
                touchStart(e) {
                    this.startX = e.touches[0].clientX;
                },
                //滑动结束
                touchEnd(e) {
                    let parentElement = e.currentTarget.parentElement;
                    this.endX = e.changedTouches[0].clientX;
                    if(parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
                        this.restSlide();
                        parentElement.dataset.type = 1;
                    }
                    if(parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
                        this.restSlide();
                        parentElement.dataset.type = 0;
                    }
                    this.startX = 0;
                    this.endX = 0;
                },
                //判断当前是否有滑块处于滑动状态
                checkSlide() {
                    let listItems = document.querySelectorAll('.list-item');
                    for(let i = 0; i < listItems.length; i++) {
                        if(listItems[i].dataset.type == 1) {
                            return true;
                        }
                    }
                    return false;
                },
                //一次只能滑动一个
                restSlide() {
                    let listItems = document.querySelectorAll('.list-item');
                    for(let i = 0; i < listItems.length; i++) {
                        listItems[i].dataset.type = 0;
                    }
                },
                editItem(e){
                    let index = e.currentTarget.dataset.index;
                    var _this = this;
                    layer.confirm('确认设置该人员为领队吗?', {icon: 3, title:'提示',shadeClose:true}, function(inlay){

                        $.post('{:url("lead")}',{dis_id:did,aid:_this.list[index].pid},function (res) {
                            if(res.code == 1){
                                layer.msg(res.msg,{icon:6});
                                location.href = location.href+'&t';
                            }else{
                                layer.msg(res.msg);
                            }
                        });

                        layer.close(inlay);
                    });
                },
                //删除
                deleteItem(e) {
                    let index = e.currentTarget.dataset.index;
                    var _this = this;
                    layer.confirm('确认移除人员吗?', {icon: 3, title:'提示',shadeClose:true}, function(inlay){
                        var indexl = layer.load(0,{offset:['45%','45%']});
                        $.post('{:url("remove")}',{dis_id:did,aid:_this.list[index].pid},function (res) {
                            layer.close(indexl);
                            if(res.code == 1){
                                _this.restSlide();
                                _this.list.splice(index, 1);
                                layer.msg(res.msg,{icon:6});
                            }else{
                                layer.msg(res.msg);
                            }
                        });

                        layer.close(inlay);
                    });


                }
            }
        })

    });


    function add() {
        location.href = '{:url("teamAddUI")}?id='+did;
    }

</script>
</body>
</html>